<template>
  <view class="return">
    <view class="return__dr">
      <u-cell-group>
        <u-cell title="物流公司" :value="form.deliveryCompany||'请选择'" isLink @click="toggleSheetVisible"></u-cell>
        <!-- //TODO field组件 -->
        <!-- <u-field :value="form.deliverySn" @change="setForm" data-key="deliverySn" label="物流单号" placeholder="请输入物流单号"
          maxlength="18" :border="false"></van-field> -->
        <u-cell title="物流单号">
          <u--input 
            slot="value" 
            placeholder="请输入物流单号" 
            v-model="form.deliverySn" 
            maxlength="18"
            border="none"
            inputAlign="right"
            @change="setForm"
          >
          </u--input>
        </u-cell>
        <u-cell title="上传凭证" value="" :border="false"></u-cell>
        <view class="photo_list">
          <view v-for="(item, index) in originPhotos" :key="index" class="item">
            <image :src="item" mode="aspectFill" class="photo"></image>
            <view class="item_btn" @click="handleDelPhoto" :data-index="index">删除</view>
          </view>
          <view class="item" @click="handleTakePhoto" v-if="originPhotos.length<3">
            <image src="https://oss-tencent.bgniao.cn/api/fd4ad3fe6e3548ab286614cb6591e4b.png" mode="aspectFill">
            </image>
          </view>
        </view>
      </u-cell-group>
    </view>
    <view class="return__submit" @click="handleReturn">提交</view>
    <u-action-sheet title="选择物流" :show="sheetVisible" :actions="actions" @close="onClose" @select="onSelect">
    </u-action-sheet>
  </view>
</template>

<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  import {
    getLogisticsCompany
  } from "@/api/modules/afterSale";
  import {
    uploadFile
  } from "@/utils/upload";
  import {
    sendRecycling
  } from "@/api/modules/user";
  import Goods from '@/components/goods/goods.vue';
  import {
    isArray
  } from 'lodash';

  @Component({
    components: {
      Goods
    }
  })
  export default class Sendlogistics extends Vue {
    goods: any = {}

    form: any = {
      deliveryCompany: "",
      deliverySn: "",
      deliveryCode: "",
    }

    actions: Array < any > = []

    sheetVisible: boolean = false

    photos: Array < any > = []
    originPhotos: Array < any > = []
    id: string = ""
    // 页面周期函数--监听页面加载
    onLoad(data) {
      getLogisticsCompany({})
        .then(res => {
          const list = res.logisticsCompanyVos.map(item => {
            return {
              name: item.name,
              id: item.logisticsCompanyId,
            };
          });
          this.setData({
            actions: list,
            id: data.id
          });
        })
        .catch(() => {
          this.$Popup.toast("获取失败");
        });
    }

    onClose() {
      this.toggleSheetVisible();
    }

    onSelect({
        name,
        id
    }) {
      this.setData({
        ["form.deliveryCompany"]: name,
        ["form.deliveryCode"]: id,
      });
    }

    toggleSheetVisible() {
      this.setData({
        sheetVisible: !this.sheetVisible
      });
    }

    handleReturn() {
      if (!this.form.deliveryCompany) {
        this.$Popup.toast("请选择物流公司");
        return;
      }
      if (!this.form.deliverySn) {
        this.$Popup.toast("请填写物流单号");
        return;
      }
      const data = {
        id: this.id,
        shipmentName: this.form.deliveryCompany,
        shipmentNumber: this.form.deliverySn,
        proofImgs: this.originPhotos.join(","),
      };
      sendRecycling(data)
        .then(() => {
          uni.showToast({
            icon:"none",
            title:"提交成功",
            duration:1000,
            success:function(){
              uni.navigateBack({
                delta:2
              });
            }
          })
        })
        .catch(err => {
          this.$Popup.toast("提交失败");
        });
    }

    setForm({
      detail,
      currentTarget: {
        dataset: {
          key
        },
      },
    }) {
      this.setData({
        form: Object.assign(this.form, {
          [key]: detail
        })
      });
    }

    handleTakePhoto() {
      if (this.originPhotos.length >= 3) {
        return this.$Popup.toast("已达到上传上限");
      }
      uni.chooseImage({
        count: 3 - this.originPhotos.length,
        sizeType: ["original", "compressed"],
        success: res => {
          const tempFilePaths = res.tempFilePaths;
          if (isArray(tempFilePaths)) {
            for (const i in tempFilePaths) {
              const photos = this.photos;
              photos.push(tempFilePaths[i]);
              this.uploadPhoto(tempFilePaths[i]);
            }
          }
        },
      });
      // .then(({ tempFilePaths: [url] }) => {
      //   const photos = this.data.photos;
      //   photos.push(url);
      //   this.uploadPhoto(url);
      //   this.setDataSmart({
      //     photos,
      //   });
      // })
      // .catch(() => null);
    }

    // 上传图片
    uploadPhoto(tempFilePaths) {
      this.setData({
          uploading: true
        }, () =>
        uni.showLoading({
          title:'上传中...'
        })
      );

      uploadFile(tempFilePaths)
        .then(data => {
          const originPhotos = this.originPhotos.concat(data);
          this.setData({
              originPhotos,
              uploading: false,
            },
            () => uni.hideLoading(),
          );
        })
        .catch(() => {
          this.$Popup.toast("上传失败");
        });
    }

    handleDelPhoto({
      currentTarget: {
        dataset: {
          index
        },
      },
    }) {
      const photos = this.photos;
      const originPhotos = this.originPhotos;
      photos.splice(index, 1);
      originPhotos.splice(index, 1);
      this.setData({
        photos,
        originPhotos,
      });
    }
  }
</script>

<style lang="scss" scoped>
  @include b(return) {
    width: 100vw;
    height: 100vh;
    background: #FFFFFF;

    @include e(dr) {
      background: #fff;

    }

    @include e(submit) {
      width: 100%;
      height: 98rpx;
      background: #FF5028;
      position: fixed;
      bottom: 0;
      left: 0;
      text-align: center;
      color: #fff;
      font-size: 28rpx;
      text-align: center;
      line-height: 98rpx;
    }
  }

  .photo_list {
    width: 700rpx;
    margin: 0 auto;
    height: 293rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .item {
      width: 160rpx;
      height: 233rpx;
      margin: 0 15rpx;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 20rpx;
      }

      .item_btn {
        width: 110rpx;
        height: 50rpx;
        border-radius: 10rpx;
        background-color: #EEEEEE;
        font-size: 26rpx;
        color: #9E9E9E;
        text-align: center;
        line-height: 50rpx;
        margin-top: 20rpx;
      }
    }
  }
</style>